<template>
  <div class="question-card">
    <!-- 问题头部 -->
    <div class="question-header">
      <div class="author-info" @click.stop="goToProfile">
        <el-avatar
          :size="32"
          :src="getMediaUrl(question.author?.avatar)"
          class="author-avatar"
        >
          {{ question.author?.nickname?.charAt(0) || question.author?.username?.charAt(0) }}
        </el-avatar>
        <div class="author-details">
          <div class="author-name">
            {{ question.author?.nickname || question.author?.username }}
          </div>
          <div class="publish-info">
            <span class="publish-time">{{ formatTime(question.createdTime) }}</span>
            <span class="question-type">Raised a question</span>
          </div>
        </div>
      </div>
      
      <div class="question-actions">
        <el-dropdown trigger="click">
          <el-button type="text" class="more-btn">
            <el-icon><MoreFilled /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleReport">Report</el-dropdown-item>
              <el-dropdown-item @click="handleNotInterested">Not interested</el-dropdown-item>
              <el-dropdown-item @click="handleBlockAuthor">Block author</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 问题内容 -->
    <div class="question-body" @click="goToDetail">
      <h3 class="question-title">{{ question.title }}</h3>
      <div v-if="question.summary" class="question-summary">
        {{ question.summary }}
      </div>
      
      <!-- 话题标签 -->
      <div v-if="question.topics && question.topics.length > 0" class="question-topics">
        <el-tag
          v-for="topic in question.topics"
          :key="topic.id"
          size="small"
          type="info"
          effect="plain"
          class="topic-tag"
          @click.stop="goToTopic(topic.id)"
        >
          {{ topic.name }}
        </el-tag>
      </div>
    </div>

    <!-- 问题统计和操作 -->
    <div class="question-footer">
      <div class="question-stats">
        <span class="stat-item">
          <el-icon><View /></el-icon>
          {{ formatCount(question.viewCount) }} browse
        </span>
        <span class="stat-item">
          <el-icon><ChatDotRound /></el-icon>
          {{ formatCount(question.answerCount) }} answer
        </span>
        <span class="stat-item">
          <el-icon><Star /></el-icon>
          {{ formatCount(question.followCount) }} follow
        </span>
      </div>

      <div class="question-operations">
        <!-- 关注按钮 -->
        <button 
          class="operation-btn"
          :class="{ active: question.isFollowed }"
          @click="handleFollow"
        >
          <el-icon><Plus /></el-icon>
          <span>{{ question.isFollowed ? 'Followed' : 'Focus on issues' }}</span>
        </button>

        <!-- 点赞按钮 -->
        <button 
          class="operation-btn"
          :class="{ active: question.isLiked }"
          @click="handleLike"
        >
          <el-icon><CaretTop /></el-icon>
          <span>{{ formatCount(question.likeCount) }}</span>
        </button>

        <!-- 分享按钮 -->
        <button
          class="operation-btn"
          @click="handleShare"
        >
          <el-icon><Share /></el-icon>
          <span>Share</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {toggleFollowQuestion, toggleLikeQuestion} from '@/api/question'
import {formatCount, formatTime} from '@/utils/format'
import {getMediaUrl} from '@/utils/media'

const router = useRouter()

// Props
const props = defineProps({
  question: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['follow', 'like', 'share'])

// 跳转到作者主页
const goToProfile = () => {
  if (props.question.author?.userId) {
    router.push(`/people/${props.question.author.userId}`)
  }
}

// 跳转到问题详情
const goToDetail = () => {
  router.push(`/question/${props.question.id}`)
}

// 跳转到话题页面
const goToTopic = (topicId) => {
  router.push(`/topic/${topicId}`)
}

// 处理关注
const handleFollow = async () => {
  try {
    const response = await toggleFollowQuestion(props.question.id)
    if (response.code === 200) {
      const newFollowState = !props.question.isFollowed
      emit('follow', props.question.id, newFollowState)
      ElMessage.success(newFollowState ? 'Followed successfully' : 'Unfollowed')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 处理点赞
const handleLike = async () => {
  try {
    const response = await toggleLikeQuestion(props.question.id)
    if (response.code === 200) {
      const newLikeState = !props.question.isLiked
      emit('like', props.question.id, newLikeState)
      ElMessage.success(newLikeState ? 'Liked successfully' : 'Unliked')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 处理写回答
const handleWriteAnswer = () => {
  router.push(`/question/${props.question.id}/answer`)
}

// 处理分享
const handleShare = () => {
  emit('share', props.question)
  ElMessage.success('分享链接已复制到剪贴板')
}

// 处理举报
const handleReport = () => {
  ElMessage.info('举报功能开发中')
}

// 处理不感兴趣
const handleNotInterested = () => {
  ElMessage.info('不感兴趣功能开发中')
}

// 处理屏蔽作者
const handleBlockAuthor = () => {
  ElMessage.info('屏蔽作者功能开发中')
}
</script>

<style lang="scss" scoped>
.question-card {
  background: $background-color;
  border-radius: $border-radius-large;
  padding: 32px;
  box-shadow: $shadow-light;
  transition: box-shadow 0.2s ease;
  margin-bottom: 24px;

  &:hover {
    box-shadow: $shadow-medium;
  }
}

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.author-avatar {
  flex-shrink: 0;
}

.author-details {
  flex: 1;
  min-width: 0;
}

.author-name {
  font-size: 15px;
  font-weight: 500;
  color: $text-color;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-info {
  font-size: 13px;
  color: $text-secondary;
  display: flex;
  align-items: center;
  gap: 8px;
}

.more-btn {
  color: $text-light;
  padding: 4px;

  &:hover {
    color: $text-secondary;
    background-color: $background-light;
  }
}

.question-body {
  cursor: pointer;
  margin-bottom: 24px;
}

.question-title {
  font-size: 22px;
  font-weight: 600;
  color: $text-color;
  line-height: 1.6;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.question-summary {
  font-size: 16px;
  color: $text-secondary;
  line-height: 1.8;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.question-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-tag {
  font-size: 13px;
  border-radius: 12px;
  padding: 4px 12px;
  cursor: pointer;
  
  &:hover {
    background-color: $primary-color;
    color: white;
  }
}

.question-footer {
  border-top: 1px solid $border-light;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: $text-secondary;

  .el-icon {
    font-size: 16px;
  }
}

.question-operations {
  display: flex;
  align-items: center;
  gap: 16px;
}

.operation-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid $border-color;
  color: $text-secondary;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: $border-radius-medium;
  transition: all 0.2s ease;

  &:hover {
    color: $primary-color;
    border-color: $primary-color;
    background-color: rgba(0, 132, 255, 0.06);
  }

  &.active {
    color: $primary-color;
    border-color: $primary-color;
    background-color: rgba(0, 132, 255, 0.1);
  }

  .el-icon {
    font-size: 16px;
  }
}
</style>
